<template>
  <div class="container">
    <!-- 搜索栏 -->
    <div class="top">
      <div class="left">
        <p class="hello">{{ ourTime }}</p>
        <p class="userName">{{ myList.nickName === '' ? 'Allen' : myList.nickName }}</p>
      </div>
      <!--   搜索框   -->
      <Search></Search>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe
          @change="onChange"
          class="my-swipe"
          :autoplay="3000"
          indicator-color="#0c34ba"
      >
        <van-swipe-item
            v-for="(banner, index) in bannerList"
            :key="index"
            @click="toProductDetails(banner)"
        >
          <img :src="banner.bannerImg" class="auto-img"/>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            <div
                :class="index == current ? 'blue' : 'white'"
                v-for="(item, index) in bannerList"
                :key="index"
            ></div>
          </div>
        </template>
      </van-swipe>
    </div>
    <!-- 热卖推荐 -->
    <div class="hot">
      <div class="hot_box">
        <span>热门推荐</span>
      </div>
    </div>
    <!-- 热门列表 -->
    <div class="hot_list">
      <van-grid :border="false" :column-num="2" :center="false" :gutter="10">
        <van-grid-item
            v-for="(item, index) in hotList"
            :key="index"
            class="hot_item"
            @click="toProductDetails(item)"
        >
          <div class="tag">
            <van-tag color="#0c34ba" size="medium" type="primary">hot</van-tag>
          </div>
          <van-image
              :src="item.smallImg"
              radius="10px"
              width="150px"
              height="150px"
          >
          </van-image>
          <div class="cName">
            <span>{{ item.name }}</span>
          </div>
          <div class="eName">
            <span>{{ item.enname | enName }}</span>
          </div>
          <div class="money">
            <span>￥{{ item.price }}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import {getBanner, getHotRecommend} from "@/api/home";
import Search from "@/components/Search.vue";
import {postFindMy} from "@/api/my";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  components: {
    Search,
  },
  data() {
    return {
      bannerList: [], //轮播图数据
      current: 0, //当前选中的轮播图
      hotList: [], //热卖推荐
      myList: []
    };
  },
  computed: {
    // 当前时间
    ourTime() {
      let currentHour = new Date().getHours();
      return currentHour >= 6 && currentHour <= 12
          ? "早上好"
          : 12 < currentHour && currentHour < 18
              ? "下午好"
              : currentHour >= 18 && currentHour <= 24
                  ? "晚上好"
                  : "深夜好";
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let self = this;
      // 获取轮播图
      getBanner().then((res) => {
        self.bannerList = res.data.result;
      });
      // 热卖推荐
      getHotRecommend({
        key: "isHot",
        value: 1,
      }).then((res) => {
        self.hotList = res.data.result;
      });
      // 我的接口
      let my = {
        tokenString: this.$cookies.get("tokenString")
      }
      postFindMy(my).then(res => {
        if (res.data.code === "A001") {
          self.myList = res.data.result[0]
        }
      })
    },
    // 修改轮播图样式
    onChange(index) {
      this.current = index;
    },
    // 前往商品详情
    toProductDetails(item) {
      this.$router.push({name: "productDetails", query: {pid: item.pid}});
    },
  },
};
</script>
<style lang="less">
.container {
  .top {
    box-sizing: border-box;
    padding: 0 20px;
    background: #fff;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .left {
      display: flex;
      width: 30%;
      height: 100%;
      justify-content: space-around;
      align-items: center;

      p {
        font-size: 14px;
        font-weight: bold;
      }

      .hello {
        color: #646566;
      }

      .userName {
        color: #0c34ba;
      }
    }
  }

  .banner {
    margin: 10px;

    .my-swipe {
      border-radius: 10px;

      .van-swipe-item {
        width: 100%;
        height: 250px;
      }

      .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        display: flex;

        div {
          margin: 0 5px;
          width: 14px;
          height: 5px;
        }

        .white {
          background: white;
        }

        .blue {
          background: #0c34ba;
        }
      }
    }
  }

  .hot {
    margin: 0 10px;
    background: #fff;
    height: 50px;
    display: flex;
    align-items: center;

    .hot_box {
      width: 20%;
      height: 30px;
      background: #0c34ba;
      text-align: center;
      line-height: 30px;
      border-top-right-radius: 16px;

      span {
        color: #fff;
        font-size: 12px;
      }
    }
  }

  .hot_list {
    margin: 10px;
    border-radius: 15px;

    .hot_item {
      font-size: 12px;
      text-align: left;
      width: 50%;

      .tag {
        position: absolute;
        z-index: 1;
        margin-left: 8px;
      }

      .cName {
        color: #999;
        font-size: 18px;
        margin: 5px 0;
      }

      .eName {
        font-weight: 200;
        color: #999;
        font-size: 14px;
        width: 95%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .money {
        font-weight: bold;
        color: #0c34ba;
        font-size: 18px;
        margin: 2px 0;
      }
    }
  }
}
</style>
